import { Text, View, ViewStyle, TextProps, TextStyle } from 'react-native';
import styles from "./Styles";
import { Children, type ReactNode } from "react";
import { Link } from "expo-router";
// import { type Href } from "expo-router/build/typed-routes/types"
import { type Href } from "expo-router"
type PProps = ReactNode

type ChildrenProps = { children?: PProps, style?: ViewStyle | TextProps | TextStyle }

type TextParamsProps = { children?: ReactNode, style?: TextStyle }
type ViewParamsProps = { children?: ReactNode, style?: ViewStyle }

export function H1({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h1, ...rest.style }}
            />
        </View>
    );
}

export function H2({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h2, ...rest.style }}
            />
        </View>
    );
}

export function H3({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h3, ...rest.style }}
            />
        </View>
    );
}

export function H4({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h4, ...rest.style }}
            />
        </View>
    );
}

export function H5({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h5, ...rest.style }}
            />
        </View>
    );
}

export function H6({ ...rest }: TextParamsProps) {
    return (
        <View style={styles.hPadding}>
            <Text
                {...rest}
                style={{ ...styles.h6, ...rest.style }}
            />
        </View>
    );
}

export function P({ children, style, ...rest }: TextParamsProps) {
    return (
        <View style={{ ...styles.hPadding }}>
            <Text
                {...rest}
                style={{ ...styles.p, ...style }}
            >{'       '} {children}</Text>
        </View>
    );
}

export function B({ style, ...rest }: TextParamsProps) {
    return (
        <View>
            <Text
                {...rest}
                style={{ ...styles.b, ...style }}
            />
        </View>
    );
}

/**
 * 废弃
 * @param href string | { pathname: '/details/[id]', params: { id: 'bacon' }} 
 * @returns 
 */
export function A({ href, ...rest }: { href: Href }) {
    return (
        <Link href={href} {...rest} />
    );
}

export function Div({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{ flexDirection: "row", flexWrap: "wrap", ...style }}>
        {children}
    </View>
}

export const Section = Div, Artical = Div, Header = Div, Footer = Div, Aside = Div;

export function Ol({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{
            // flexDirection: "row", 
            flexWrap: "wrap",
            // paddingLeft: 16,
            // paddingRight: 16,
            // paddingTop: 8,
            // paddingBottom: 8,
            padding: 6,
            ...style
        }}>
        {
            Array.isArray(children) ?
                children.map((item, index) => {
                    // console.log(item);
                    return item;
                }) : children
        }
    </View>
}

export function Ul({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{
            // flexDirection: "row", 
            flexWrap: "wrap",
            // paddingLeft: 16,
            // paddingRight: 16,
            // paddingTop: 8,
            // paddingBottom: 8,
            padding: 6,
            ...style
        }}>
        {children}
    </View>
}

export function Li({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{ flexDirection: "row", flexWrap: "wrap", padding: 2, ...style }}>
        {children}
    </View>
}
